<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp"%>

<script type="text/javascript">
	
	//保存家基本资料的修改
	$.validator.setDefaults({
		submitHandler: function() {
			var introduction = $.trim($("#familyAll").find("#introduction").val());
			var nickname = $("#familyAll").find("#family").val();
			$("#saveButton").attr("onclick","");
			$.post("saveFamilyInfo.htm",{
				introduction:introduction,
				nickname:nickname
			}, function(data) {
				if(data=="success"){
					$("#member_info_detail").load("familyInfo.htm",
					function() {
						$("#refreshFamilyName").html(nickname);
						showSuccess();
						$("#jiaZiLiao1").attr("class", "current");
					});
				}
			});
		}
	});
	
	//显示修改家的名称的界面
	function updateFamilyName(){
		$("#oldFamilyName").remove();
		$("#familyName").show();
	}
	
	//验证
	$(function() {
		//绑定回车事件
		$(':input').bind('keyup', function(event){
		   if (event.keyCode=="13"){
		   		$("#tiJiaoBiaoDan").submit();
		   }
		});
		
		//表单验证使用属性validate进行验证
		$.metadata.setType("attr","validate");
		$("#tiJiaoBiaoDan").validate({
			rules: {
				family: {
					required: true,
					maxlength: 20
				},
				introduction: {
					maxlength: 80
				}
			},
			messages: {
				family : {
					required: "家庭名称不能为空",
					maxlength: "户主姓名不能超过20个字符"
				},
				introduction : {
					maxlength: "家的简介不能超过80个字符"
				}
			}
		});
	});
	
</script>


	<form action="" id="tiJiaoBiaoDan" >
	<div class="success" id="base_info_tip_success" style="display: none; margin-left: 32px;">
		<img alt="修改成功" src="<%=basePath%>images/home_images/ico29.png">家基本资料修改成功
	</div>
	<div class="h_dataInfo">
		<table id="familyAll">
			<tr>
				<td width="60" class="data_text">门牌：</td>
				<td width="254">${member.familyObj.doorplate }</td>
			</tr>
			<tr>
				<td class="data_text">家的昵称：</td>
				<td>
				<span id="oldFamilyName">${member.familyObj.nickname }<strong><a href="javascript:void(0);" onclick="updateFamilyName()">修改</a></strong></span>
				<span id="familyName" style="display: none;"><input type="text" value="${member.familyObj.nickname }" id="family" name="family"></span>
				</td>
			</tr>
			<tr>
				<td class="data_text vatt">家的简介：</td>
				<td><textarea id="introduction" name="introduction" class="info_text">${member.familyObj.introduction }</textarea></td>
			</tr>
			<c:if test="${fn:length(memberList)>=2 }">
			<tr>
				<td class="data_text">家庭成员：</td>
				<c:forEach items="${memberList }" var="member">
					<c:if test="${member.identifier!=sessionScope.member.identifier }">
						<td>${member.roleLabel }：${member.username }</td>
					</c:if>
				</c:forEach>
			</tr>
			</c:if>
		</table>
	</div>
	<table>
		<tr>
			<td width="130"></td>
			<td width="524">
				<div class="h_button w75 mt15"><strong id="saveButton" onclick="javascript:$('#tiJiaoBiaoDan').submit();">保存设置</strong></div>
			</td>
		</tr>
	</table>
</form>
